<template>
	<view class="content">
		<scroll-view scroll-y="true" style="height: 700px;" lower-threshold="10" @scrolltolower="addView()">
			<view class="header">
				<view class="uni-margin-wrap">
					<view class="header-wrap"
						style="float: left;width: 100%;height: 45px;margin-top: -50px;position: fixed;z-index: 9999;background-color: #ff5454;">
						<view>
							<a @click="navCategory" style="background-image: url('/static/category.png');
						width: 20px;height: 20px;margin-left: 10px;margin-top: 15px;" open-type="navigateTo"></a>
						</view>
						<view style="margin-left: 50px;margin-top: -25px;width: 68%;height: 30px;
					border-radius: 15px;background-color: white;">
							<view style="
							border-radius: 15px;
							background-image: url('../../static/下载 (1).png');background-repeat: no-repeat;
							background-position: 10px 7px;
							width: 75%;height: 30px;align-items: center;
						">
								<input disabled placeholder="飞利浦空气净化器" style="margin-left: 35px;padding-top: 3px;" />
							</view>

						</view>
						<view style="float: right;margin-right: 30px;margin-top: -28px;color: white;">
							<image src="../../static/京东.png" v-if="fig == false"
								style="width: 40px;height: 40px;margin-top: -7px;margin-right: -10px;" @click="navUser">
							</image>
							<span @click="login" v-model="fig" v-text="!fig ? '' : '登录'"></span>
						</view>
					</view>

					<swiper class="swiper" circular :indicator-dots="true" duration="2000">
						<swiper-item v-for="(imgList,index) in imageList" :key="classifiedId">
							<view class="swiper-item uni-bg-red" v-for="(sub,index1) in imgList.subtag"
								:key="classifiedId">
								<image :src="sub.classifiedImageUrl" :alt="sub.classifiedTitle"
									style="width: 30px; height: 30px;" /><br />
								<span>
									{{sub.classifiedTitle}}
								</span>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="activity">
					<view class="seckill"></view>
					<view style="float: left;margin-top: 50px;margin-left: -65px;color: white;font-weight: bold;">限时低价
					</view>
					<view class="">
						<input type="text" value="去抢购" disabled style="
					 width: 65px;height: 20px;border-radius: 15px;text-align: left;
					 float: left;margin-top: 85px;margin-left: -65px;
					 background-color: white;color: #ff5500;
					 background-image: url('https://img20.360buyimg.com/img/jfs/t1/238192/15/7188/265/65783069F1178bf7d/b15fdc2244088b71.png');
					 background-repeat: no-repeat;font-size: 16px;
					 background-position: 50px 7px;" />
						<view class="index_skil">
							<scroll-view :scroll-x="true">
								<view class="scroll-view_H">
									<view class="activityitem" v-for="(item,index) in advertisement" :key="spikeId">
										<image :src="item.spikeImageUrl" style="width: 60px;
									        	height: 60px;margin-top: 20px;" mode=""></image><br />
										<a
											style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">{{item.spikePrice}}</a>
									</view>
								</view>

							</scroll-view>
						</view>
					</view>
				</view>
				<view class="goods" v-for="(item,index) in goodsList" :key="index"
					@click="navGoods(item.listGoodsId,item.shopKeeperId)">
					<view
						style="width: 160px;float: left;height: 230px;border-radius: 15px 15px 0px 0px;background-color: #fff;margin-top: 10px;margin-left: 15px;">
						<image :src="item.listGoodsImageUrl" style="width: 160px;height: 155px;
					border-radius: 15px 15px 0px 0px;">
						</image>
						<p>{{item.listGoodsTitle}}</p>
						<span style="color: #ff5500;">{{item.listGoodsSymbol}}<span
								style="font-size: 18px;">{{item.listGoodsPrice}}</span>.{{item.listGoodsDecimal}}</span>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		goodsList,
		act,
		insert
	} from '../../apiRequest/config.js'
import { isToken } from '../../apiRequest/login.js'
	export default {
		data() {
			return {
				isTouch: false,
				scrollX: true,
				imageList: [],
				goodsList: [],
				advertisement: [],
				fig: true,
				pageIndex: 1,
				pages: 0
			}
		},
		onShow(e) {
			if(uni.getStorageSync("token") != null && uni.getStorageSync("token") != ''){
				isToken().then(isToken=>{
					this.fig = !isToken
					if(this.fig == true){
						uni.removeStorageSync("token");
						uni.showModal({
							title:'请登录',
							content:'登录已过期',
							success() {
								uni.reLaunch({
									url:'/pages/login/login'
								}) // 请求不成功时，拒绝 Promise
							}
						})
					}
				})
			}else{
				this.fig = true
			}
			
			this.$isLogin = this.fig
			console.log(this.$isLogin);
		},
		onLoad() {
			this.add();
			this.goodsOfList();
			this.activity();
		},
		methods: {
			activity() {
				act().then(act => {
					if(act.code != 401 && act != 403){
						this.advertisement = [...this.advertisement, ...act];
					}
				})
			},
			add() {
				let that = this;
				var subtag1 = [];
				var subtag2 = [];
				insert().then(insert => {
					for (var i = 0; i < insert.length; i++) {
						if (i < 5) {
							subtag1.push(insert[i]);
						} else {
							subtag2.push(insert[i]);
						}
					}
					that.imageList.push({
						index: "1",
						subtag: subtag1
					}, {
						index: "2",
						subtag: subtag2
					})
				})

			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			addView() {
				this.pageIndex++;
				this.goodsOfList();
			},
			navCategory() {
				uni.switchTab({
					url: '/pages/category/category'
				});
			},
			navUser() {
				uni.switchTab({
					url: '/pages/user/user'
				});
			},
			navGoods(index, shopKeeperId) {
				uni.setStorageSync('keeperId', shopKeeperId);
				uni.navigateTo({
					url: '/pages/index/indexGoods/indexGoods?id=' + index
				});
				this.fig = !this.$isLogin;
			},
			goodsOfList() {
				goodsList(this.pageIndex).then(goodsList => {
					if(goodsList != null && goodsList != ''){
						this.goodsList = [...this.goodsList, ...goodsList];
					}
					// 处理获取到的商品列表
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
	}



	.header {
		background-image: linear-gradient(to bottom, red, #fff);
		width: 100%;
		height: 130px;
	}

	.uni-margin-wrap {
		padding-top: 50px;
	}

	.activity {
		width: 90%;
		height: 120px;
		background-image: url("https://img11.360buyimg.com/img/jfs/t1/226923/11/7714/45152/65782c91F9d91466d/24928a901f4c3f58.png");
		background-size: 100% 100%;
		border-radius: 20px;
		margin-left: 20px;
		margin-top: 20px;
	}

	.seckill {
		background-image: url("https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png");
		width: 4rem;
		height: 2rem;
		background-size: 100% 100%;
		float: left;
		margin-top: 10px;
		margin-left: 10px;
	}

	.swiper {
		height: 180rpx;
		width: 90%;
		border: 1px solid #f8f8f8;
		border-radius: 20px;
		margin-left: 20px;
		background-color: #fff;
	}

	.swiper-item {
		text-align: center;
		z-index: 9999;
		margin-left: 10px;
		margin-top: 10px;
		font-size: 13px;
		float: left;

	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.index_skil {
		width: 75%;
		height: 113px;
		border: 1px solid beige;
		border-radius: 15px;
		float: right;
		margin-right: 3px;
		margin-top: 2.5px;
		background-color: #fff;
		letter-spacing: 6px;
	}

	.goods {
		margin-top: 10px;
		margin-right: 20px;
	}

	p {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.scroll-view_H {
		width: 100%;
		flex-direction: row;
		display: flex;

		.activityitem {
			width: 100%;
			height: 150px;
			justify-content: center;
			align-items: center;
		}
	}
</style>